<template>
    <div class="tabbar">
        <ul>
            <li
            v-for="item in tabbarList" :key="item.id" 
            @click="goPath(item)"
            >
               <van-icon :name="item.active" size="24" />
                <span>{{item.title}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tabbarList:[
                    {id:1, title:'首页', path:'/',active:'wap-home-o'},
                    {id:2,title:'分类', path:'/list',active:'apps-o'},
                    {id:3,title:'购物车', path:'/cart',active:'shopping-cart-o'},
                    {id:4,title:'我的', path:'/my',active:'user-o'},
                ],
            }
        },
        methods: {
            goPath(item) {
                if(this.$route.path == item.path) return
                    this.$router.push(item.path)
            },
        }

    }
</script>

<style lang="less" scoped>
.tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 2.9375rem;
    background: #fff;
    border-top: 1px solid #f3f3f3;
    ul {
        height: 100%;
        display: flex;
        justify-content: space-around;
        li {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            span {
                font-size: .75rem;
            }
        }
    }
}

</style>